<template>
  <div class="editing-schedule">
    <el-dialog :title="`${submitBtnText}排班信息`" custom-class="a-el-dialog-editing" :visible.sync="visible" width="500px"
      append-to-body>
      <AElForm ref="AElForm" :data="form" :initData="initData" :rows="2" labelWidth="85px" />
      <span slot="footer" class="dialog-footer">
        <el-button @click="visible = false">取 消</el-button>
        <el-button type="success" @click="submit">{{ submitBtnText }}</el-button>
        <el-button type="danger">删除</el-button>
        <el-button @click="resetForm">重置</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'EditingSchedule',
  props: {
    type: { type: String, default: "1" }, // 1新增 2编辑
  },
  data() {
    return {
      visible: false, // 是否显示编辑排班信息弹窗
      form: {}, // 表单数据
      initData: {}, // 回显表单
    }
  },
  created() {
    this.setForm();
    this.getData();
  },
  computed: {
    // 判断当前是新增还是回显编辑
    submitBtnText: function () {
      let text = "新增";
      switch (this.type) {
        case "2": text = "编辑"; break;
      };
      return text;
    }
  },
  methods: {
    /**
     * 修改visible
     */
    editVisible(value = false) {
      this.visible = value;
      this.resetForm();
    },
    /**
     * 表单配置
     */
    setForm() {
      this.form = {
        treatmentName: {
          label: "治疗项目",
          rules: [{ required: true, message: '请输入治疗项目', trigger: 'blur' }]
        },
        therapistName: {
          label: "医生姓名",
          rules: [{ required: true, message: '请输入治疗项目', trigger: 'blur' }]
        },
        scheduleDate: {
          label: "日期",
          type: "date",
          rows: 1,
          valueFormat: "yyyy-MM-dd",
          rules: [{ required: true, message: '请选择日期', trigger: 'blur' }]
        },
        patientName: {
          label: "病人姓名",
          rules: [{ required: true, message: '请输入病人姓名', trigger: 'blur' }]
        },
        adviceId: {
          label: "病人id",
          rules: [{ required: true, message: '请输入病人id', trigger: 'blur' }]
        },
        treatmentRoomName: {
          label: "治疗室",
          type: "select",
          rules: [{ required: true, message: '请选择治疗室', trigger: 'change' }],
          children: [
            { label: "心理治疗室", value: "0" }
          ]
        },
        equipmentName: {
          label: "治疗设备",
          type: "select",
          rules: [{ required: true, message: '请选择治疗设备', trigger: 'change' }],
          children: [
            { label: "心理治疗室", value: "0" }
          ]
        },
        scheduleTimeType: {
          label: "时间段",
          type: "select",
          rules: [{ required: true, message: '请选择时间段', trigger: 'change' }],
          children: [
            { label: "心理治疗室", value: "0" }
          ]
        },
        durationTreatment: {
          label: "治疗时长",
          type: "select",
          rules: [{ required: true, message: '请选择治疗时长', trigger: 'change' }],
          children: [
            { label: "心理治疗室", value: "0" }
          ]
        },
        description: {
          label: "描述",
          type: "textarea",
          rows: 1,
          rules: [{ required: true, message: '请输入描述', trigger: 'blur' }]
        }
      }
    },
    /**
     * 重置表单
     */
    resetForm() {
      // 将操作丢到微任务中
      this.$nextTick(() => {
        let form = this.$refs.AElForm.resetForm();
        console.log(form, "form");
      });
    },
    /**
     * 获取排班信息回显
     */
    getData() {
      if (this.type === "2") {
        setTimeout(() => {
          this.initData = {
            treatmentName: "我是测试治疗项目"
          }
        }, 2000);
      }
    },
    /**
     * 新增
     */
    submit() {
      this.$refs.AElForm.validateForm((flag, form) => {
        if (flag) {
          // 关闭编辑对话框
          this.editVisible();
          // 关闭选择病人对话框
          this.$parent.editVisible();
        }
      });
    }
  }
}
</script>

<style lang="scss" scoped>
@import url('./index.scss');
</style>
